<template>
  <!-- =====【节点详情页】===== -->

  <div class="tempxyz menmuStyle">
    <CCard class="rightCard">
      <CCardHeader class="header-wraper">
        <div class="header-left-titleWraper" @click="goBack">
          <span class="textTitle"><i
              class="fa fa-arrow-left"
              aria-hidden="true"
              style="color: #666"
            ></i
            >&nbsp;&nbsp;节点资源</span>
        </div>
      </CCardHeader>
      <CCardBody class="card-body">
        <!-- 头部 -->
        <div slot="header">
          <div class="pie-tb-header">
            <div class="playVideoHeader">
              <div class="page-item">
                <div class="body-content">
                  <div class="item-title">
                    <img
                      src="../../../../../assets/nodeDetails.png/title01.png"
                      class="nodeIcon"
                      alt=""
                    />
                    <span>节点基本信息</span>
                  </div>
                  <div class="echarts-map2">
                    <div class="echarts-item2 echart-style2">
                      <div class="name-style">
                        <div class="name-item">
                          <div class="echart-style-text">主机名</div>
                          <div class="echart-style-text-content">
                            <span>{{ nodeData.nodeName }}</span>
                          </div>
                        </div>
                        <div class="name-item">
                          <div class="echart-style-text">别&nbsp;&nbsp; 名</div>
                          <div class="echart-style-text-content">
                            <span>{{ nodeData.name}}</span>
                          </div>
                        </div>
                        <div class="name-item">
                          <div class="echart-style-text">IP&nbsp;&nbsp;&nbsp;&nbsp;</div>
                          <div class="echart-style-text-content">
                            <span>{{ nodeData.ipAddress}}</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="body-content">
                  <div class="item-title">
                    <img
                      src="../../../../../assets/nodeDetails.png/title01.png"
                      class="nodeIcon"
                      alt=""
                    />
                    <span>运行时间</span>
                    <span>{{ nodeData.nodeBootTime }}</span>
                  </div>
                  <div class="echarts-map">
                    <div class="echarts-item">
                      <div id="Main1" class="echart-style"></div>
                    </div>
                    <div class="echarts-item echarts-item-left">
                      <div id="Main2" class="echart-style"></div>
                    </div>
                  </div>
                </div>
                <div class="body-content">
                  <div class="item-title">
                    <img
                      src="../../../../../assets/nodeDetails.png/title02.png"
                      class="nodeIcon"
                      alt=""
                    />
                    <span>CPU核数</span>
                    <span>{{ nodeData.cpuCores }} 个</span>
                  </div>
                  <div class="echarts-map">
                    <div class="echarts-item-demo">
                      <div id="Main3" class="echart-style"></div>
                    </div>
                  </div>
                </div>
                <div class="body-content">
                  <div class="item-title">
                    <img
                      src="../../../../../assets/nodeDetails.png/title03.png"
                      class="nodeIcon"
                      alt=""
                    />
                    <span>内存总量</span>
                    <span>{{ nodeData.memoryTotal }} GiB</span>
                  </div>
                  <div class="echarts-map">
                    <div class="echarts-item">
                      <div id="Main5" class="echart-style"></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 中部 -->
        <div slot="iscontent">
          <div class="pie-tb-iscontent">
            <div class="page-item">
              <div class="page-item-content">
                <p class="title">系统平均负载</p>
                <div class="echart-content">
                  <div class="echarts-map">
                    <div id="Main7" class="echart-styles"></div>
                  </div>
                  <div class="table">
                    <Table
                      :columns="columns1"
                      :data="data1"
                      height="200"
                    ></Table>
                  </div>
                </div>
              </div>
              <div class="page-item-content">
                <p class="title">磁盘信息</p>
                <div class="echart-content">
                  <div class="echarts-map">
                    <div id="Main8" class="echart-styles"></div>
                  </div>
                  <div class="table">
                    <Table
                      :columns="columns2"
                      :data="data2"
                      height="200"
                    ></Table>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 底部 -->
        <div slot="footer">
          <div class="pie-tb-footer">
            <div class="page-item">
              <div class="page-item-content">
                <p class="title">CPU使用率</p>
                <div class="echart-content">
                  <div class="echarts-map">
                    <div id="Main9" class="echart-styles"></div>
                  </div>
                  <div class="table">
                    <Table
                      :columns="columns4"
                      :data="data4"
                      height="200"
                    ></Table>
                  </div>
                </div>
              </div>
              <div class="page-item-content">
                <p class="title">内存信息</p>
                <div class="echart-content">
                  <div class="echarts-map" style="width: 100%">
                    <div id="Main10" class="echart-styles"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </CCardBody>
    </CCard>
  </div>
</template>
<script>
export default {
  name: "nodesMonitorDetail",
  data() {
    return {
      nodeData: {}, //节点信息

      option7Data: [], //负载信息
      nodesMonitorBusinessName: "", //节点信息==系统名称
      nodesMonitorNodeName: "", // 节点信息==节点名称
      // 表头
      columns1: [
        {
          title: "",
          width: 40,
          key: "type",
        },
        {
          title: "最小值",
          key: "MIN",
          // maxWidth: 50,
        },
        {
          title: "最大值",
          key: "MAX",
          // maxWidth: 50,
        },
        {
          title: "平均值",
          key: "AVG",
          // maxWidth: 50,
        },
        {
          title: "当前值",
          key: "CURRENT",
          // maxWidth: 50,
        },
      ],
      // 表格数据
      data1: [
        {
          type: "—",
          MIN: "",
          MAX: "0.3400",
          AVG: "0.1725",
          CURRENT: "00300",
          cellClassName: {
            type: "demo-table-info-cell-type0",
          },
        },
        {
          type: "—",
          MIN: "",
          MAX: "0.3400",
          AVG: "0.1725",
          CURRENT: "00300",
          cellClassName: {
            type: "demo-table-info-cell-type1",
          },
        },
        {
          type: "—",
          MIN: "",
          MAX: "0.3400",
          AVG: "0.1725",
          CURRENT: "00300",
          cellClassName: {
            type: "demo-table-info-cell-type2",
          },
        },
      ],
      columns2: [
        {
          title: "文件系统",
          key: "fstype",
          width: "70",
        },
        // {
        //   title: "分区",
        //   key: "mountpoint",
        //   width: "80",
        // },
        {
          // minWidth:100,
          maxWidth: 240,
          title: "分区",
          key: "mountpoint",
          align: "size",
          render: (h, params) => {
            return h("div", [
              h(
                "span",
                {
                  style: {
                    display: "inline-block",
                    minWidth: "100px",
                    maxWidth: "200px",
                    padding: "0 10px",
                    overflow: "hidden",
                    textOverflow: "ellipsis",
                    whiteSpace: "nowrap",
                  },
                  domProps: {
                    title: params.row.mountpoint,
                  },
                },
                params.row.mountpoint
              ),
            ]);
          },
        },
        {
          // minWidth:100,
          maxWidth: 240,
          title: "总空间(GiB)",
          key: "size",
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "span",
                {
                  style: {
                    display: "inline-block",
                    minWidth: "100px",
                    maxWidth: "200px",
                    padding: "0 10px",
                    overflow: "hidden",
                    textOverflow: "ellipsis",
                    whiteSpace: "nowrap",
                  },
                  domProps: {
                    title: params.row.size,
                  },
                },
                params.row.size
              ),
            ]);
          },
        },
        {
          // minWidth:100,
          maxWidth: 240,
          title: "可用空间(GiB)",
          key: "availableDisk",
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "span",
                {
                  style: {
                    display: "inline-block",
                    minWidth: "100px",
                    maxWidth: "200px",
                    padding: "0 10px",
                    overflow: "hidden",
                    textOverflow: "ellipsis",
                    whiteSpace: "nowrap",
                  },
                  domProps: {
                    title: params.row.availableDisk,
                  },
                },
                params.row.availableDisk
              ),
            ]);
          },
        },
        {
          // minWidth:100,
          maxWidth: 240,
          title: "使用率(%)",
          key: "diskUsage",
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "span",
                {
                  style: {
                    display: "inline-block",
                    minWidth: "100px",
                    maxWidth: "200px",
                    padding: "0 10px",
                    overflow: "hidden",
                    textOverflow: "ellipsis",
                    whiteSpace: "nowrap",
                  },
                  domProps: {
                    title: params.row.diskUsage,
                  },
                },
                params.row.diskUsage
              ),
            ]);
          },
        },
        // {
        //   title: "总空间(GiB)",
        //   key: "size",
        //   // width:"80"
        // },
        // {
        //   title: "可用空间(GiB)",
        //   key: "availableDisk",
        //   width: "90",
        // },
        // {
        //   title: "使用率(%)",
        //   key: "diskUsage",
        //   // width:"100"
        // },
      ],
      data2: [],
      columns4: [
        {
          title: "",
          key: "type",
          width: 40,
        },
        {
          title: "最小值",
          key: "MIN",
        },
        {
          title: "最大值",
          key: "MAX",
        },
        {
          title: "平均值",
          key: "AVG",
        },
        {
          title: "当前值",
          key: "CURRENT",
        },
      ],
      data4: [
        {
          type: "—",
          MIN: "",
          MAX: "",
          AVG: "",
          CURRENT: "",
          cellClassName: {
            type: "demo-table-info-cell-type0",
          },
        },
        {
          type: "—",
          MIN: "",
          MAX: "",
          AVG: "",
          CURRENT: "",
          cellClassName: {
            type: "demo-table-info-cell-type1",
          },
        },
        {
          type: "—",
          MIN: "",
          MAX: "",
          AVG: "",
          CURRENT: "",
          cellClassName: {
            type: "demo-table-info-cell-type2",
          },
        },
        // {
        //   type: "——",
        //   MAX: "",
        //   AVG: "0.1725",
        //   CURENT: "00300",
        //   cellClassName: {
        //     type: "demo-table-info-cell-type3",
        //   },
        // },
      ],
      option1: {
        title: {
          left: "center",
          top: "10%",
          text: "CPU使用率（5m）",
          textStyle: {
            //主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
            fontSize: 14,
            fontWeight: "normal",
            color: "#98dcff",
          },
        },
        color: "#52A6F8",
        series: [
          {
            center: ["50%", "60%"],
            radius: "60%", //仪表盘半径
            type: "gauge",
            startAngle: 90,
            endAngle: -270,
            pointer: {
              show: false,
            },
            progress: {
              show: true,
              overlap: false,
              roundCap: true,
              clip: false,
              itemStyle: {
                // borderWidth: 1,
                // borderColor: '#464646'
              },
            },
            axisLine: {
              lineStyle: {
                width: 10,
              },
            },
            splitLine: {
              show: false,
              distance: 0,
              length: 10,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: false,
              distance: 50,
            },
            data: [
              {
                value: 64,
                detail: {
                  offsetCenter: ["0%", "0%"],
                },
              },
            ],
            detail: {
              width: 80,
              height: 20,
              fontSize: 20,
              fontWeight: 600,
              color: "#52A6F8",
              formatter: "{value}%",
            },
          },
        ],
      },
      option2: {
        title: {
          left: "center",
          top: "10%",
          // text: "CPU IO Wait （5m）",
          text: "CPU 输入输出等待（5m）",
          textStyle: {
            //主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
            fontSize: 14,
            color: "#98dcff",
            fontWeight: "normal",
          },
        },
        color: "#52A6F8",
        series: [
          {
            center: ["50%", "60%"],
            radius: "60%", //仪表盘半径
            type: "gauge",
            startAngle: 90,
            endAngle: -270,
            pointer: {
              show: false,
            },
            progress: {
              show: true,
              overlap: false,
              roundCap: true,
              clip: false,
              itemStyle: {
                // borderWidth: 1,
                // borderColor: '#464646'
              },
            },
            axisLine: {
              lineStyle: {
                width: 10,
              },
            },
            splitLine: {
              show: false,
              distance: 0,
              length: 10,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: false,
              distance: 50,
            },
            data: [
              {
                value: 29,
                detail: {
                  offsetCenter: ["0%", "0%"],
                },
              },
            ],
            detail: {
              width: 80,
              height: 20,
              fontSize: 20,
              fontWeight: 600,
              color: "#52A6F8",
              formatter: "{value}%",
            },
          },
        ],
      },
      option3: {
        title: {
          left: "center",
          top: "10%",
          text: "内存使用率",
          textStyle: {
            //主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
            fontSize: 14,
            color: "#98dcff",
            fontWeight: "normal",
          },
        },
        color: "#52A6F8",
        series: [
          {
            center: ["50%", "60%"],
            radius: "60%", //仪表盘半径
            type: "gauge",
            startAngle: 90,
            endAngle: -270,
            pointer: {
              show: false,
            },
            progress: {
              show: true,
              overlap: false,
              roundCap: true,
              clip: false,
              itemStyle: {
                // borderWidth: 1,
                // borderColor: '#464646'
              },
            },
            axisLine: {
              lineStyle: {
                width: 10,
              },
            },
            splitLine: {
              show: false,
              distance: 0,
              length: 10,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: false,
              distance: 50,
            },
            data: [
              {
                value: 64,
                detail: {
                  offsetCenter: ["0%", "0%"],
                },
              },
            ],
            detail: {
              width: 80,
              height: 20,
              fontSize: 20,
              fontWeight: 600,
              color: "#52A6F8",
              formatter: "{value}%",
            },
          },
        ],
      },
      option4: {
        title: {
          left: "center",
          top: "10%",
          text: "当前打开的文档描述",
          textStyle: {
            //主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
            fontSize: 14,
            color: "#98dcff",
            fontWeight: "normal",
          },
        },
        color: "#52A6F8",
        series: [
          {
            center: ["50%", "60%"],
            radius: "60%", //仪表盘半径
            type: "gauge",
            startAngle: 90,
            endAngle: -270,
            pointer: {
              show: false,
            },
            progress: {
              show: true,
              overlap: false,
              roundCap: true,
              clip: false,
              itemStyle: {
                // borderWidth: 1,
                // borderColor: '#464646'
              },
            },
            axisLine: {
              lineStyle: {
                width: 10,
              },
            },
            splitLine: {
              show: false,
              distance: 0,
              length: 10,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: false,
              distance: 50,
            },
            data: [
              {
                value: 64,
                detail: {
                  offsetCenter: ["0%", "0%"],
                },
              },
            ],
            detail: {
              width: 80,
              height: 20,
              fontSize: 20,
              fontWeight: 600,
              color: "#52A6F8",
              formatter: "{value}%",
            },
          },
        ],
      },
      option5: {
        title: {
          left: "center",
          top: "10%",
          text: "根分区使用率",
          textStyle: {
            //主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
            fontSize: 14,
            color: "#98dcff",
            fontWeight: "normal",
          },
        },
        color: "#52A6F8",
        series: [
          {
            center: ["50%", "60%"],
            radius: "60%", //仪表盘半径
            type: "gauge",
            startAngle: 90,
            endAngle: -270,
            pointer: {
              show: false,
            },
            progress: {
              show: true,
              overlap: false,
              roundCap: true,
              clip: false,
              itemStyle: {
                // borderWidth: 1,
                // borderColor: '#464646'
              },
            },
            axisLine: {
              lineStyle: {
                width: 10,
              },
            },
            splitLine: {
              show: false,
              distance: 0,
              length: 10,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: false,
              distance: 50,
            },
            data: [
              {
                value: 29,
                detail: {
                  offsetCenter: ["0%", "0%"],
                },
              },
            ],
            detail: {
              width: 80,
              height: 20,
              fontSize: 20,
              fontWeight: 600,
              color: "#52A6F8",
              formatter: "{value}%",
            },
          },
        ],
      },
      option7: {
        color: ["#57D0D2", "#7B62EA", "#2CA0FF"],
        opacity: 0.8,
        tooltip: {
          trigger: "item",
          formatter: "{a0}:{c0}%",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        legend: {
          data: ["1m", "5m", "15m"],
          textStyle: {
            color: "#98dcff",
          },
        },
        toolbox: {
          feature: {
            // saveAsImage: {}
          },
        },
        grid: {
          left: "4%",
          right: "7%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: [],
            axisLabel: { color: "#98dcff" },

            splitLine: {
              //网格线
              lineStyle: {
                type: "dashed", //设置网格线类型 dotted：虚线   solid:实线
              },
              show: true, //隐藏或显示
            },
          },
          // {
          //   type: "category",
          //   boundaryGap: false,
          //   axisLine: {
          //     show: false,
          //   },
          // },
        ],
        yAxis: [
          {
            type: "value",
            boundaryGap: false,
            // axisLabel: {
            //     formatter: '{value} KB'
            // },

            axisLabel: { color: "#98dcff", formatter: "{value}" },

            data: ["0", "0.10", "0.20", "0.30", "0.40", "0,50"],
            splitLine: {
              //网格线
              lineStyle: {
                type: "dashed", //设置网格线类型 dotted：虚线   solid:实线
              },
              show: true, //隐藏或显示
            },
          },
        ],
        series: [
          {
            name: "1m",
            type: "line",
            smooth: false,
            areaStyle: {
              opacity: 0.3,
              color: "#57D0D2",
            },
            emphasis: {
              focus: "series",
            },
            data: [],
            // data: [0.39, 0.39, 0.41, 0.37, 0.36, 0.34],
          },
          {
            name: "5m",
            type: "line",
            smooth: false,
            areaStyle: {
              normal: {
                opacity: 0.3,
                color: "#7B62EA",
              },
            },
            emphasis: {
              focus: "series",
            },
            data: [0.36, 0.37, 0.37, 0.34, 0.28, 0.23],
          },
          {
            name: "15m",
            type: "line",
            smooth: false,
            areaStyle: {
              normal: {
                opacity: 0.3,
                color: "#2CA0FF",
              },
            },
            emphasis: {
              focus: "series",
            },
            data: [0.18, 0.28, 0.32, 0.24, 0.2, 0.15],
          },
        ],
      },
      option8: {
        // title:{
        //   text:"hhh",
        //   left:"center",
        //   top:"65%",
        //   //  center:["50%","70%"],
        // },
        color: ["#52A6F8", "#00CDCC", "#38D100", "#FFD400"],
        tooltip: {
          trigger: "item",
          // formatter: "{b}:{c}GiB",
        },
        legend:[],
        series: [
          {
            name: "磁盘分类",
            type: "pie",
            radius: ["50%", "70%"],
            center:["50%","45%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
              },
            },
            labelLine: {
              show: false,
            },
            itemStyle: {
              borderRadius: 0,
              borderColor: "#fff",
              borderWidth: 2,
            },
            data: [
                // {y:280,}
              // { value: 202, name: "/ect/honstname" },
              // { value: 410, name: "/ect/honsts" },
              // { value: 280, name: "/ect/home" },
              // { value: 320, name: "/ect/desktop" },
            ],
          },
        ],
      },
      option9: {
        color: ["#57D0D2", "#7B62EA", "#2CA0FF", "#EF843C"],
        opacity: 0.8,
        tooltip: {
          trigger: "item",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        legend: {
          // data: ["System", "User", "Iowait", "每秒I/O操作（%）"],
          textStyle: {
            color: "#98dcff",
          },
        },
        toolbox: {
          feature: {
            // saveAsImage: {}
          },
        },
        grid: {
          left: "4%",
          right: "7%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: [],
            axisLabel: { color: "#98dcff" },

            splitLine: {
              //网格线
              lineStyle: {
                type: "dashed", //设置网格线类型 dotted：虚线   solid:实线
              },
              show: true, //隐藏或显示
            },
          },
          {
            type: "category",
            boundaryGap: false,
            axisLine: {
              show: false,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            boundaryGap: false,
            axisLabel: {
              color: "#98dcff",
              formatter: "{value}%",
            },

            splitLine: {
              //网格线
              lineStyle: {
                type: "dashed", //设置网格线类型 dotted：虚线   solid:实线
              },
              show: true, //隐藏或显示
            },
          },
        ],
        series: [
          {
            name: "系统",
            type: "line",
            smooth: false,
            areaStyle: {
              opacity: 0.3,
              color: "#57D0D2",
            },
            emphasis: {
              focus: "series",
            },
            data: [2.7, 2.7, 2.9, 2.8, 2.8, 2.8, 2.7, 3.0, 2.5, 2.4],
          },
          {
            name: "用户",
            type: "line",
            smooth: false,
            areaStyle: {
              normal: {
                opacity: 0.3,
                color: "#7B62EA",
              },
            },
            emphasis: {
              focus: "series",
            },
            data: [2.6, 2.5, 2.8, 2.6, 2.6, 2.4, 2.5, 2.6, 5.5, 2.5],
          },
          {
            name: "等待",
            type: "line",
            smooth: false,
            areaStyle: {
              normal: {
                opacity: 0.3,
                color: "#2CA0FF",
              },
            },
            emphasis: {
              focus: "series",
            },
            data: [0.3, 0.2, 0.3, 0.2, 0.2, 0.4, 0.3, 0.4, 0.2, 0.3],
          },
        ],
      },
      option10: {
        color: ["#57D0D2", "#7B62EA", "#2CA0FF"],
        opacity: 0.8,
        tooltip: {
          trigger: "item",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        legend: {
          data: ["总内存", "已用", "可用"],
          textStyle: {
            color: "#98dcff",
          },
        },
        toolbox: {
          feature: {
            // saveAsImage: {}
          },
        },
        grid: {
          left: "4%",
          right: "7%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: [],
            axisLabel: { color: "#98dcff" },

            splitLine: {
              //网格线
              lineStyle: {
                type: "dashed", //设置网格线类型 dotted：虚线   solid:实线
              },
              show: true, //隐藏或显示
            },
          },
          {
            type: "category",
            boundaryGap: false,
            axisLine: {
              show: false,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            // boundaryGap: false,
            axisLabel: {
              show: true,
              textStyle: {
                color: "#98dcff",
              },
              formatter: "{value}GiB",
            },
            splitLine: {
              //网格线
              lineStyle: {
                type: "dashed", //设置网格线类型 dotted：虚线   solid:实线
              },
              show: true, //隐藏或显示
            },
          },
        ],
        series: [
          {
            name: "总内存",
            type: "line",
            smooth: false,
            areaStyle: {
              // normal: {
              opacity: 0.3,
              color: "#57D0D2",
              // }
            },
            emphasis: {
              focus: "series",
            },
            data: [],
          },
          {
            name: "已用",
            type: "line",
            smooth: false,
            areaStyle: {
              // normal: {
              opacity: 0.3,
              color: "#7B62EA",
              // },
            },
            emphasis: {
              focus: "series",
            },
            data: [],
          },
          {
            name: "可用",
            type: "line",
            smooth: false,
            areaStyle: {
              // normal: {
              opacity: 0.3,
              color: "#2CA0FF",
              // },
            },
            emphasis: {
              focus: "series",
            },
            data: [],
          },
        ],
      },
    };
  },
  created() {
    // 获取节点负载信息
    this.getLoadInfo(1, 0);
    this.getLoadInfo(5, 1);
    this.getLoadInfo(15, 2);
    // 获取节点cpu信息
    this.getCpuInfo("system", 0);
    this.getCpuInfo("user", 1);
    this.getCpuInfo("iowait", 2);
    // 获取节点内存信息
    this.getMemoryInfo("total", 0);
    this.getMemoryInfo("use", 1);
    this.getMemoryInfo("free", 2);
    this.getDiskInfo();

    this.getdateNode();
  },
  mounted() {
    this.nodeBasicInformation();
  },
  updated() {
    this.chartsShow();
    this.chartsShowDiskData();
  },
  methods: {
    // 获取节点磁盘信息
    getDiskInfo() {
      let params = { nodeName: this.$route.query.nodeName };
      this.http
        .get(this.$api.monitorApi.getNodeDiskDetail, params)
        .then((res) => {
          if (res.data.code == 0) {
            this.data2 = res.data.data.result;
            this.data2.map((item) => {
              let _item = {
                value: item.availableDisk,
                name: item.fstype + " " + "分区：" + item.mountpoint,
              };
              this.option8.series[0].data.push(_item);
              // this.option8.legend[0].data.push(_item);
            });
            this.option8.tooltip.formatter = `{b}    {c}GiB`;
          }
        });
    },
    // 获取节点负载信息==接口及图表
    getLoadInfo(num, index) {
      let params = {
        nodeName: this.$route.query.nodeName,
        loadNum: num,
        startTime: Number(new Date().getTime()) - 43200000,
        endTime: new Date().getTime(),
        step: "1h",
      };
      this.http
        .get(this.$api.monitorApi.getRangeNodeLoad, params)
        .then((res) => {

          if (res.data.code == 0) {
            // 获取echar数据
            let timeArr = [];
            let dataArr = [];
            res.data.data.result.map((item) => {
              let _item = this.formatDate(item[0], 2);
              timeArr.push(_item);
              dataArr.push(item[1]);
            });
            // 系统平均负载==图表

            this.option7.series[index].data = dataArr;
            this.option7.xAxis[0].data = timeArr;
            this.option7.tooltip.formatter = `{a0}:{c0}${res.data.data.unit}`;
            // this.option7.series[0].name = num+'m';
            this.option7.yAxis[0].axisLabel.formatter = `{value}${res.data.data.unit}`;
            let myChart7 = this.$echarts.init(document.getElementById("Main7"));
            myChart7.setOption(this.option7);
            // 获取表格数据
            this.data1[index].MIN = res.data.data.min;
            this.data1[index].MAX = res.data.data.max;
            this.data1[index].AVG = res.data.data.avg;
            this.data1[index].CURRENT = res.data.data.current;
          } else {
            this.$Message.error(res.data.message);
          }
        });
    },
    // 获取节点cpu信息==接口及图表
    getCpuInfo(type, index) {
      let params = {
        nodeName: this.$route.query.nodeName,
        type: type,
        startTime: Number(new Date().getTime()) - 43200000,
        endTime: new Date().getTime(),
        step: "1h",
      };
      this.http.get(this.$api.monitorApi.getRangeCpu, params).then((res) => {
        if (res.data.code == 0) {
          // 获取echar数据
          let timeArr = [];
          let dataArr = [];
          res.data.data.result.map((item) => {
            let _item = this.formatDate(item[0], 2);
            timeArr.push(_item);
            dataArr.push(item[1]);
          });
          // cpu使用率==图表
          this.option9.series[index].data = dataArr;
          this.option9.xAxis[0].data = timeArr;
          let myChart9 = this.$echarts.init(document.getElementById("Main9"));
          this.option9.tooltip.formatter = `{a0}:{c0}${res.data.data.unit}`;
          this.option9.yAxis[0].axisLabel.formatter = `{value}${res.data.data.unit}`;
          myChart9.setOption(this.option9);
          // 获取表格数据
          this.data4[index].MIN = res.data.data.min;
          this.data4[index].MAX = res.data.data.max;
          this.data4[index].AVG = res.data.data.avg;
          this.data4[index].CURRENT = res.data.data.current;
        } else {
          this.$Message.error(res.data.message);
        }
      });
    },

    // 获取节点内存信息==接口及图表
    getMemoryInfo(type, index) {
      let params = {
        nodeName: this.$route.query.nodeName,
        type: type,
        startTime: Number(new Date().getTime()) - 43200000,
        endTime: new Date().getTime(),
        step: "1h",
      };
      this.http.get(this.$api.monitorApi.getRangeMemory, params).then((res) => {
        if (res.data.code == 0) {
          // 获取echar数据
          let timeArrMemoryInfo = [];
          let dataArrMemoryInfo = [];
          res.data.data.result.map((item) => {
            let _item = this.formatDate(item[0], 2);
            timeArrMemoryInfo.push(_item);
            dataArrMemoryInfo.push(item[1]);
          });
          // 内存信息==图表
          this.option10.series[index].data = dataArrMemoryInfo;
          this.option10.xAxis[0].data = timeArrMemoryInfo;
          let myChart10 = this.$echarts.init(document.getElementById("Main10"));
          this.option10.tooltip.formatter = `{a0}:{c0}${res.data.data.unit}`;
          this.option10.yAxis[0].axisLabel.formatter = `{value}${res.data.data.unit}`;
          myChart10.setOption(this.option10);
        } else {
          this.$Message.error(res.data.message);
        }
      });
    },

    // 获取节点列表==接口
    getdateNode() {
      let paramsId = this.$route.query.nodeName + "";
      this.http
        .get(this.$api.monitorApi.clusterNodeDetail2 + paramsId)
        .then((res) => {
          if (res.data.code == 0) {
            this.nodeData = res.data.data;
            this.getNodeIndex();
            // this.nodeData.map((item) => this.nodeNameEach.push(item.nodeName));
          }
        });
    },
    // 获取节点动态集群列表==接口
    getNodeIndex() {
      let _self = this;
      let params = {
        name: this.nodeData.nodeName,
      };
      this.http.get(this.$api.monitorApi.clusterNode, params).then((res) => {
        if (res.data.code == 0) {
          // 分配给item每一项
          Object.assign(this.nodeData, res.data.data[this.nodeData.nodeName]);
        }
      });
    },

    // =====【图表方法】=====
    chartsShow() {
      // echars渲染
      this.$nextTick(() => {
        //
        if (this.nodeData.cpuUsage == null) {
          this.nodeData.cpuUsage = 0;
        }
        if (this.nodeData.cpuIoWait == null) {
          this.nodeData.cpuIoWait = 0;
        }
        if (this.nodeData.memoryUsage == null) {
          this.nodeData.memoryUsage = 0;
        }
        if (this.nodeData.diskRootUsage == null) {
          this.nodeData.diskRootUsage = 0;
        }
        this.option1.series[0].data[0].value = this.nodeData.cpuUsage;
        this.option2.series[0].data[0].value = this.nodeData.cpuIoWait;
        this.option3.series[0].data[0].value = this.nodeData.memoryUsage;
        this.option5.series[0].data[0].value = this.nodeData.diskUsage;
        let myChart = this.$echarts.init(document.getElementById("Main1"));
        myChart.setOption(this.option1);
        let myChart1 = this.$echarts.init(document.getElementById("Main2"));
        myChart1.setOption(this.option2);
        let myChart2 = this.$echarts.init(document.getElementById("Main3"));
        myChart2.setOption(this.option3);
        let myChart4 = this.$echarts.init(document.getElementById("Main5"));
        myChart4.setOption(this.option5);
      });
    },
    nodeBasicInformation() {
      this.nodesMonitorBusinessName =
        this.$route.query.nodesMonitorBusinessName;
    },
    chartsShowDiskData() {
      // 获取节点磁盘信息
      let myChart8 = this.$echarts.init(document.getElementById("Main8"));
      // this.option7.tooltip.formatter=`{a0}:{c0}${res.data.unit}`;

      myChart8.setOption(this.option8);
    },
    goBack() {
      // this.$router.push({
      //   path: "nodesMonitor",
      //   query: {}
      // });
      // this.$router.go(-1);
        this.$router.go(-1);
    },
  },
};
</script>
<style lang="less" scoped>
.rightCard .card-body {
  height: calc(100% - 78px) !important;
  overflow-y: auto;
  margin-top: 17px;
 padding: 10px 0px 18px 11px !important;
}
.page-item {
  width: 100%;
  //   background-color: #fff;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.page-item {
  .body-content {
    display: flex;
    justify-content: center;
    flex-direction: column;
    margin-right: 10px;
    margin-bottom: 10px;
    flex: 1;

    .item-title {
      height: 60px;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;

      box-shadow: inset 0px 0px 3px 1px var(--label-font-color, #5d8bc4);

      span {
        font-size: 15px;
        font-weight: 600;
        margin-right: 10px;
      }
    }

    .echarts-map {
      display: flex;
      justify-content: space-between;
      margin-top: 10px;
    }
    .echarts-map2 {
      display: flex;
      /* flex-wrap:wrap ;
                 */
      flex-direction: column;
      margin-top: 10px;
      height: 204px;
      /* zoom:1.1; */
    }
    .echarts-item {
      text-align: center;

      flex: 1;
      box-shadow: inset 0px 0px 3px 1px var(--label-font-color, #5d8bc4);
    }
    .echarts-item-left {
      margin-left: 10px;
    }
    .echarts-item-demo {
      text-align: center;

      flex: 1;
      box-shadow: inset 0px 0px 3px 1px var(--label-font-color, #5d8bc4);
    }
    /* .echarts-item:last-child {
              margin-left: 10px;
            } */
    .echarts-item2 {
      text-align: center;

      flex: 1;
      box-shadow: inset 0px 0px 3px 1px var(--label-font-color, #5d8bc4);
    }
  }
  /* .body-content:last-child .echarts-map:last-child .echarts-item:last-child {
          margin-left: 0;
        } */
}

.page-item-content:nth-child(1) {
  // width: 700px;
  flex: 1.5;

  .echarts-map {
    width: 55%;
    height: 220px;
  }

  .table {
    width: 45%;
    padding: 10px;
  }
}

.page-item-content:nth-child(2) {
  // width: 420px;
  flex: 1;

  .echarts-map {
    width: 30%;
    height: 220px;
  }

  .table {
    width: 70%;
    padding: 10px 10px 10px 0;
  }
}

.page-item-content:nth-child(3) {
  // width: 400px;
  flex: 1;
  .table {
    width: 100%;
    height: 220px;
    padding: 10px;
  }
}

.page-item-content {
  display: flex;
  justify-content: center;
  /* flex-direction: column; */
  margin-right: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;

  .title {
    font-size: 18px;
    font-weight: 600;
    width: 100%;
  }

  .echart-content {
    display: flex;
    justify-content: space-between;
    align-items: center;

    margin-top: 10px;
    flex-wrap: wrap;
    width: 100%;
    height: calc(100% - 20px);
    box-shadow: inset 0px 0px 3px 1px var(--label-font-color, #5d8bc4);
  }
}

.echart-style {
  width: 100%;
  height: 200px;
  display: flex;
  justify-content: center;
}
.echart-style2 {
  width: 100%;
  height: 40%;
}
.echart-style2:last-child {
  margin-top: 10px;
  height: 70%;
}
.echart-style-text-title {
  text-align: left;
}
.name-style {
  // display: flex;
  text-align: center;
}
.name-item {
  display: flex;
  align-items: center;
  height: 50%;
}
.name-item:first-child {
  margin-top: 15px;
}
.echart-style-text {
  // display: flex;
  font-size: 14px;
  font-weight: normal;
  color: #98dcff;
  display: flex;
  height: 100%;
  flex-direction: column;
  justify-content: center;
  margin-left: 10px;
  width: 80px;
}
.echart-style-text-content-main {
  display: flex;
  height: 100%;
}
.echart-style-text-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 5px 10px;
  font-size: 16px;
  font-weight: 600;
  color: #98dcff;
  text-align: left;
  flex: 1;
  span {
    width: 260px;
    /* display: inline-block; */
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    white-space: break-spaces;
    word-break: break-all;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    word-wrap: break-word;
  }
}
.echart-styles {
  width: 100%;
  height: 250px;
  padding: 10px;
  display: flex;
  justify-content: center;
}

//表格样式
.ivu-table-wrapper {
  width: 100%;
}

/deep/ .table td {
  padding: 0 !important;
  text-align: center !important;
  height: 38px !important;
}

/deep/.ivu-table-cell {
  padding-left: 0 !important;
  padding-right: 0 !important;
  white-space: nowrap !important;
}

/deep/ .demo-table-info-cell-type0 {
  color: #57d0d2;
  font-weight: bolder;
}

/deep/ .demo-table-info-cell-type1 {
  color: #7b62ea;
  font-weight: bolder;
}

/deep/ .demo-table-info-cell-type2 {
  color: #2ca0ff;
  font-weight: bolder;
}

/deep/ .demo-table-info-cell-type3 {
  color: #ef843c;
  font-weight: bolder;
}

/deep/ .disk-type0 {
  color: #52a6f8;
  font-weight: bolder;
}

/deep/ .disk-type1 {
  color: #ffd400;
  font-weight: bolder;
}

/deep/ .disk-type2 {
  color: #38d100;
  font-weight: bolder;
}

/deep/ .disk-type3 {
  color: #00cdcc;
  font-weight: bolder;
}

/deep/ .usage-type {
  background-color: #35b033 !important;
}

/deep/ .table thead th {
  border: none !important;
}

/deep/ .ivu-table-header thead tr th {
  text-align: center !important;
  font-size: 12px !important;
  font-weight: 500;
}
/* /deep/ .ivu-table-header{

    } */
// .page-item .body-content:nth-child(1) .item-title {
//   background: url("../../assets/img/nodeDetails.png/bg01.png");
// }

// .page-item .body-content:nth-child(2) .item-title {
//   background: url("../../assets/img/nodeDetails.png/bg02.png");
// }

// .page-item .body-content:nth-child(3) .item-title {
//   background: url("../../assets/img/nodeDetails.png/bg03.png");
// }

.nodeIcon {
  width: 20px;
  height: 20px;
  margin-right: 10px;
}
.goBack {
  float: right;
  margin: 20px 20px 0 0;
  margin: 5px;
}
  .pie-tb-iscontent{
    height: 335px;
  }
</style>
